<template>
	<div class="fileDetails">
		<el-page-header @back="goBack" content="详情页面"></el-page-header>
		<el-card style="margin-top: 20px;">
			<el-tabs v-model="activeName">
				<el-tab-pane label="样本信息" name="one">
					<div>
						<p class="details-up">元数据</p>
						<p class="details-title"><span>文件ID:</span>{{fileDetails.data.id}}</p>
						<p class="details-title"><span>上传时间:</span>{{fileDetails.data.created_at}}</p>
						<p class="details-up">样本信息</p>
						<p class="details-title"><span>文件名:</span>{{fileDetails.data.name}}</p>
						<p class="details-title"><span>文件大小:</span>{{fileDetails.data.size / 1024}} kb</p>
						<p class="details-title"><span>文件类别:</span>{{fileDetails.data.type}}</p>
						<p class="details-title"><span>MIME:</span>{{fileDetails.data.mime}}</p>
						<p class="details-up">HASHES</p>
						<p class="details-title"><span>MD5:</span>{{fileDetails.data.md5}}</p>
						<p class="details-title"><span>SHA1:</span>{{fileDetails.data.sha1}}</p>
						<p class="details-title"><span>SHA256:</span>{{fileDetails.data.sha256}}</p>
						<p class="details-title"><span>SHA512:</span>{{fileDetails.data.sha512}}</p>
					</div>
				</el-tab-pane>
				<el-tab-pane label="查看样本复用字符串" name="two">
					<div v-html="tableData.resultHtml" style="min-height: 500px;"
						v-loading="loading"></div>
				</el-tab-pane>
				<el-tab-pane label="查看攻击组织特征字符串" name="three">
					<div v-html="tableData.resultHtmlGroup" style="min-height: 500px;"
						v-loading="loading"></div>
				</el-tab-pane>
				<el-tab-pane label="恶意代码家族" name="four">
					<div v-html="family" style="min-height: 500px;"
						v-loading="loading"></div>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				loading: false,
				activeName: 'one',
				options: [],
				tableData: {
					resultHtml: ['<table></table>'],
					resultHtmlGroup: ['<table></table>'],
				},
				list: {
					"elephant": [
						".?AVlogic_error@std@@",
						".?AVtype_info@@",
						".?AVbad_exception@std@@",
						"delete[]",
						",%I-64OSk%Y",
						"`vbtable'",
						"1#QNAN",
						"~QCv)/&D(",
						"@.rsrc",
						"MM/dd/yy",
						"`string'",
						".?AVbad_alloc@std@@",
						"zc%C1",
						"`vftable'",
						"`vcall'",
						"HH:mm:ss",
						"!\"#$%&'()*+,-./0123456789:;<=>?@abcdefghijklmnopqrstuvwxyz[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
					],
					"APT28": [
						"HD$(H$"
					],
					"windows": [
						".?AVout_of_range@std@@"
					],
					"APT1": [
						".?AVtype_info@@"
					],
					"APT19": [
						".?AVlogic_error@std@@"
					]
				},
				fileDetails: {
					data: {}
				},
				family:''
				
			}
		},
		mounted() {
			// this.dataSearch()
			this.getFileStrings()
			this.getFileFamily()
		},
		methods: {
			async getFileStrings() {
				let parmas = this.$route.query
				this.loading = true
				let data = await this.$api.getBastInfo(parmas)
				this.fileDetails = data.data
				await this.$api.getFileStrings(parmas).then(res => {
					this.loading = false
					this.tableData = res.data.results[0]
				}).catch(err => {
					this.loading = false
				})
			},
			
			async getFileFamily(){
				let parmas = this.$route.query
				await this.$api.getFileFamily(parmas).then(res => {
					this.loading = false
					this.family = res.data.family
				}).catch(err => {
					this.loading = false
				})
			},

			dataSearch() {
				let obj = this.list
				let arr = []
				let i = 1
				for (var key in obj) {
					obj[key].forEach(item => {
						arr.push({
							id: i++,
							str: item,
							type: key
						})
					})
				}
				this.tableData = arr
			},

			goBack() {
				// this.$router.go(-1)
				this.$router.push({path:'/fileSearch'})
			},

		},
	}
</script>

<style scoped>
	.fileDetails {
		width: 98%;
		margin: 20px auto;
		display: flex;
		flex-direction: column;
	}
</style>

<style>
	.fileDetails table {
		width: 100%;
	}

	.fileDetails th {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 15px;
		font-weight: bold;
		width: 200px;
		padding: 12px 10px;
		color: #909399;
		/* border-bottom: 1px solid #ebeef5; */
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		line-height: 23px;
	}

	.fileDetails tr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebeef5;
	}
	
	.fileDetails tr:hover {
		background-color: #f5f7fa;
	}

	.fileDetails td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 200px;
		font-size: 14px;
		padding: 12px 10px;
		color: #606266;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		line-height: 23px;
	}

	.details-up {
		margin: 10px 0;
		font-size: 17px;
		font-weight: bold;
	}

	.details-title {
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		text-indent: 16px;
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
	}

	.details-title span {
		font-weight: bold;
		display: inline-block;
		width: 100px;
	}

	.fileDetails .el-input--suffix .el-input__inner {
		width: 300px;
	}

	.fileDetails .el-input__inner {
		width: 300px;
	}
</style>
